<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
<!--		<div class="widgets-content">-->
<!--			<div class="widgets" ref="widgets">-->
<!--				<div class="widgets-wrapper" style="width: 85%;margin-right: 15px;">-->
<!--					<el-row class="card-row" style="height: 150px;">-->
<!--						<el-card shadow="hover" class="el-card-row">-->
<!--							<template #header>-->
<!--								<div class="card-header">-->
<!--									<img src="img/ver.svg" style="height:35px" />-->
<!--									<span>快捷操作</span>-->
<!--									<span class="more">配置</span>-->
<!--								</div>-->
<!--							</template>-->
<!--						</el-card>-->
<!--					</el-row>-->
<!--					<el-row class="card-row" style="height: 220px;">-->
<!--						<el-card shadow="hover" class="el-card-row">-->
<!--							<template #header>-->
<!--								<div class="card-header">-->
<!--									<img src="img/ver.svg" style="height:35px" />-->
<!--									<span>待办事项</span>-->
<!--								</div>-->
<!--							</template>-->
<!--						</el-card>-->
<!--					</el-row>-->
<!--					<el-row class="card-row" style="height: 220px;">-->
<!--						<el-col :span="12">-->
<!--							<el-card shadow="hover" class="el-card-row">-->
<!--								<template #header>-->
<!--									<div class="card-header">-->
<!--										<img src="img/ver.svg" style="height:35px" />-->
<!--										<span>今日汇总</span>-->
<!--									</div>-->
<!--								</template>-->
<!--							</el-card>-->
<!--						</el-col>-->
<!--						<el-col :span="12">-->
<!--							<el-card shadow="hover" class="el-card-row" style="width:98%;margin-left: 15px;">-->
<!--								<template #header>-->
<!--									<div class="card-header">-->
<!--										<img src="img/ver.svg" style="height:35px" />-->
<!--										<span>近7天销售趋势</span>-->
<!--									</div>-->
<!--								</template>-->
<!--							</el-card>-->
<!--						</el-col>-->
<!--					</el-row>-->
<!--				</div>-->
<!--				<div class="widgets-wrapper" style="width: 15%;">-->
<!--					<el-row class="card-row" style="height: 250px;">-->
<!--						<el-card shadow="hover" class="el-card-row">-->
<!--							<template #header>-->
<!--								<div class="card-header">-->
<!--									<img src="img/ver.svg" style="height:35px" />-->
<!--									<span>系统消息</span>-->
<!--									<span class="more">更多></span>-->
<!--								</div>-->
<!--							</template>-->
<!--						</el-card>-->
<!--					</el-row>-->
<!--					<el-row class="card-row" style="height: 280px;">-->
<!--						<el-card shadow="hover" class="el-card-row">-->
<!--							<template #header>-->
<!--								<div class="card-header">-->
<!--									<img src="img/ver.svg" style="height:35px" />-->
<!--									<span>视频教学</span>-->
<!--									<span class="more">更多></span>-->
<!--								</div>-->
<!--							</template>-->
<!--						</el-card>-->
<!--					</el-row>-->
<!--					<el-row class="card-row" style="height: 250px;">-->
<!--						<el-card shadow="hover" class="el-card-row">-->
<!--							<template #header>-->
<!--								<div class="card-header">-->
<!--									<img src="img/ver.svg" style="height:35px" />-->
<!--									<span>扫码体验小程序端</span>-->
<!--								</div>-->
<!--							</template>-->
<!--						</el-card>-->
<!--					</el-row>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
		<div style="padding: 20px;width: 100%;">
			<div class="contantBox">
				<div>
					<div class="textTop">欢迎使用 {{this.$TOOL.data.get("WEBNAME")}} 系统！</div>
					<img src="img/index_bg.png" class="imgIndex">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import draggable from 'vuedraggable'
import allComps from './components'

export default {
	components: {
		draggable
	},
	data() {
		return {
			customizing: false,
			allComps: allComps,
			selectLayout: [],
			defaultGrid: this.$CONFIG.DEFAULT_GRID,
			grid: []
		}
	},
	created() {
		this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
	},
	mounted() {
		this.$emit('on-mounted')
	},
	computed: {
	},
	methods: {
	}
}
</script>

<style scoped lang="scss">
.card-header {
	display: flex;
	align-items: center;
}

.more {
	color: #999;
	font-size: 12px;
	position: absolute;
	right: 15px;
}

.card-row {
	.el-card-row {
		width: 100%;
		box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	}

	margin-bottom: 15px;

}

.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
}

.widgets-aside {
	width: 360px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	position: relative;
	overflow: auto;
}

.widgets-aside-title {
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.widgets-aside-title i {
	margin-right: 10px;
	font-size: 18px;
}

.widgets-aside-close {
	font-size: 18px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	cursor: pointer;
}

.widgets-aside-close:hover {
	background: rgba(180, 180, 180, 0.1);
}

.widgets-top {
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.widgets-top-title {
	font-size: 18px;
	font-weight: bold;
}

.widgets {
	transform-origin: top left;
	transition: transform .15s;
	display: flex;
}

.draggable-box {
	height: 100%;
}

.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}

.customizing .widgets-wrapper .draggable-box {
	border: 1px dashed var(--el-color-primary);
	padding: 15px;
}

.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

.customize-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	cursor: move;
}

.customize-overlay label {
	background: var(--el-color-primary);
	color: #fff;
	height: 40px;
	padding: 0 30px;
	border-radius: 40px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: move;
}

.customize-overlay label i {
	margin-right: 15px;
	font-size: 24px;
}

.customize-overlay .close {
	position: absolute;
	top: 15px;
	right: 15px;
}

.customize-overlay .close:focus,
.customize-overlay .close:hover {
	background: var(--el-button-hover-color);
}

.widgets-list {}

.widgets-list-item {
	display: flex;
	flex-direction: row;
	padding: 15px;
	align-items: center;
}

.widgets-list-item .item-logo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(180, 180, 180, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-right: 15px;
	color: #6a8bad;
}

.widgets-list-item .item-info {
	flex: 1;
}

.widgets-list-item .item-info h2 {
	font-size: 16px;
	font-weight: normal;
	cursor: default;
}

.widgets-list-item .item-info p {
	font-size: 12px;
	color: #999;
	cursor: default;
}

.widgets-list-item:hover {
	background: rgba(180, 180, 180, 0.1);
}

.widgets-wrapper .sortable-ghost {
	opacity: 0.5;
}

.selectLayout {
	width: 100%;
	display: flex;
}

.selectLayout-item {
	width: 60px;
	height: 60px;
	border: 2px solid var(--el-border-color-light);
	padding: 5px;
	cursor: pointer;
	margin-right: 15px;
}

.selectLayout-item span {
	display: block;
	background: var(--el-border-color-light);
	height: 46px;
}

.selectLayout-item.item02 span {
	height: 30px;
}

.selectLayout-item.item02 .el-col:nth-child(1) span {
	height: 14px;
	margin-bottom: 2px;
}

.selectLayout-item.item03 span {
	height: 14px;
	margin-bottom: 2px;
}

.selectLayout-item:hover {
	border-color: var(--el-color-primary);
}

.selectLayout-item.active {
	border-color: var(--el-color-primary);
}

.selectLayout-item.active span {
	background: var(--el-color-primary);
}


.dark {
	.widgets-aside {
		background: #2b2b2b;
	}

	.customize-overlay {
		background: rgba(43, 43, 43, 0.9);
	}
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}
.contantBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #ffffff;
  .textTop {
     width: 100%;
     font-size: 28px;
     font-weight: bold;
     letter-spacing: 2px;
     text-align: center;
     margin-bottom: 20px;
     //font-family: 'Alibaba Puhui', serif;
     font-family: "Microsoft YaHei";
  }
  .imgIndex {
     width: 700px;
     height: 500px;
  }
}
</style>
